<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<style type="text/css">
			.mui-bar-nav {
				border-bottom: 1px solid #eee;
			}
			
			.orderList {
				background: #fff;
			}
			
			.orderList_head {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				padding: 4px 14px;
				border-bottom: 1px solid #eee;
				color: #666;
				font-size: 12px;
			}
			
			.orderList_head>div {
				min-width: 50px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.orderList_head>div:last-child {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
				text-align: right;
			}
			
			.order_title {
				padding: 8px 14px 0;
			}
			
			.orderList_main {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				padding: 14px;
				font-size: 12px;
				color: #de2729;
				position: relative;
				border-bottom: 1px solid #eee;
			}
			
			.integral_img {
				width: calc(100vw/4);
				margin-right: 14px;
				height: calc(100vw/4);
				max-width: 100px;
				max-height: 100px;
			}
			
			.integral_img>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.orderList_title {
				color: #333;
				font-size: 14px;
			}
			
			.orderList_main>div>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.orderList_main>div:last-child {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			/*收货人*/
			
			.order_user {
				font-size: 12px;
				border-bottom: 1px solid #eee;
				padding: 4px 14px;
			}
			
			.total {
				text-align: right;
				line-height: 40px;
				height: 40px;
				padding: 0 14px;
			}
			
			.total>span {
				color: #de2729;
			}
		</style>
	</head>

	<body>
		<div id="orderDetail" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">积分订单详情</h1>
			</header>
			<div class="mui-content">
				<div class="orderList">
					<div class="orderList_head">
						<div v-if="data.orderStatus==0">已提交</div>
						<div v-else-if="data.orderStatus==1">已发货</div>
						<div v-else-if="data.orderStatus==2">已完成</div>
						<div v-else>已取消</div>
						<div>订单号：{{data.orderSn}}</div>
					</div>
					<div class="order_user">
						<div> 收 货 人：{{usrAdd.mobile}}</div>
						<div>收货地址：{{usrAdd.subAdds}}</div>
					</div>
					<div v-for="orderItemDtos in data.orderItemDtos">
						<div class="order_title">商品信息</div>
						<div class="orderList_main">
							<div class="integral_img"><img :src="imgCommonUrl+orderItemDtos.prodPic" /></div>
							<div>
								<div class="orderList_title">{{orderItemDtos.prodName}}</div>
								<div>￥{{orderItemDtos.price}}</div>
								<div>积分：{{orderItemDtos.exchangeIntegral}}</div>
								<div>数量：{{orderItemDtos.basketCount}}</div>
							</div>
						</div>
					</div>
					<div class="total">商品总积分：<span>¥{{data.integralTotal}}</span></div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var list = self.parameter
				var orderDetail = new Vue({
					el: '#orderDetail',
					data: {
						imgCommonUrl: common.imageUrl,
						data: '',
						usrAdd: ''
					}
				})
				orderDetail.data = list
				orderDetail.usrAdd = list.usrAddrSubDto
			})
		</script>
	</body>

</html>